<template>
  <div class="mainDiv">
    <mt-field label="姓名" :state="state.name" placeholder="请输入姓名" v-model="data.name"> </mt-field>
    <mt-field label="手机号" :state="state.phone" placeholder="请输入手机号" v-model="data.phone" :attr="{ 'maxlength': 20 }"></mt-field>
    <div>
      <mt-cell title="性别"  is-link  v-on:click.native="showAddSex">
       <span>{{sex?sex: '请选择'}}</span>
      </mt-cell>
       <mt-popup style="width:100%" v-model="sexVisible" position="bottom">
          <mt-picker :slots="addSetList"  value-key="label" :show-toolbar="true" ref="pickerSex">
             <div @click="oncancel" class="cancel">取消</div>
             <div @click="onSexChange" class="sure">确认</div>
          </mt-picker>
       </mt-popup>
    </div>
     <div class="line"></div>
    <div>
      <mt-cell title="年级"  is-link  v-on:click.native="showAddGrade">
       <span>{{data.grade?data.grade: '请选择'}}</span>
      </mt-cell>
       <mt-popup style="width:100%" v-model="gradeVisible" position="bottom">
          <mt-picker :slots="addGradeList"   :show-toolbar="true" ref="pickerGrade">
             <div @click="oncancel" class="cancel">取消</div>
             <div @click="onGradeChange" class="sure">确认</div>
          </mt-picker>
       </mt-popup>
    </div>
     <div class="line"></div>
   
    <!-- <mt-radio title="性别"  class="myRadio"  v-model="data.sex"  :options="sexList"></mt-radio> -->
    
    <!-- <mt-radio title="年级"  class="myRadio"  v-model="data.grade"  :options="['高一', '高二', '高三']"> </mt-radio>
    <div class="line"></div> -->
    <mt-checklist class="myRadio"  title="三个自选科目" :max="3" v-model="data.subjectArray"  :options="subjectOptions"></mt-checklist>

    <mt-field class='mgtop10 after'  type="number" v-model="data.totalScore" placeholder="选填" label="总  分"></mt-field>
    <mt-field class='mgtop10 after'  type="number" v-model="data.rankNum" placeholder="选填" label="位次号"></mt-field>
    <div class="line"></div>
    <!-- <mt-radio   title="预约专家类型" v-model="data.expertType"   :options="expertTypeList"></mt-radio> -->
    <div>
      <mt-cell title="预约专家类型"  is-link  v-on:click.native="showAddType">
         <span>{{type?'': '请选择'}}</span>
      </mt-cell>
      <mt-cell>
       <span>{{type?type: ''}}</span>
      </mt-cell>
       <mt-popup style="width:100%" v-model="typeVisible" position="bottom">
          <mt-picker :slots="addTypeList"  value-key="label" :show-toolbar="true" ref="pickerType">
             <div @click="oncancel" class="cancel">取消</div>
             <div @click="onTypeChange" class="sure">确认</div>
          </mt-picker>
       </mt-popup>
    </div>
    <div class="line"></div>
    <mt-field class="borderTop" placeholder="教育经历（从初中至今的学校概况、担任职务、成绩及获奖情况等）" type="textarea" rows="4" v-model="data.info1"></mt-field>
    <mt-field class="borderTop" placeholder="这次咨询希望解决的问题" type="textarea" rows="4" v-model="data.info2"></mt-field>
    <mt-field class="borderTop" placeholder="家庭情况（包括成长经历、父母等家人情况、他们对你的期望、家庭对你的影响等）" type="textarea" rows="4" v-model="data.info3"></mt-field>
    <mt-field class="borderTop" placeholder="是否已有目标院校和专业，如果已有那是什么" type="textarea" rows="4" v-model="data.info4"></mt-field>
    <mt-field class="borderTop" placeholder="其他希望告诉咨询师的" type="textarea" rows="4" v-model="data.info5"></mt-field>
    <div class="padlr10">
      <mt-button size="large" type="primary" @click="submit()">提交</mt-button>
    </div>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  import { Popup } from 'mint-ui';
  import { Picker } from 'mint-ui';
  const sexList = [{value:'1',label:'男'},{value:'2',label:'女'}]
  const expertTypeList = [
              {value:'0',label:'线上专家一对一志愿辅导(1988.00 元,两个小时)'},
              {value:'1',label:'线上资深专家一对一志愿辅导(2988.00 元,两个小时)'},
              {value:'2',label:'线下专家一对一志愿辅导(3888.00 元,两个小时)'},
              {value:'3',label:'线下资深专家一对一志愿辅导(5888.00 元,两个小时)'},
              {value:'4',label:'资深专家线上生涯规划指导(1588.00  元)'},
              {value:'5',label:'资深专家线下生涯规划指导(1988.00  元)'},
              {value:'6',label:'三位一体咨询(300.00  元)'},
              {value:'7',label:'留学咨询(300.00  元)'},
              {value:'8',label:'选考咨询(300.00  元)'},
              {value:'9',label:'资深专家高考资源审核(500.00  元)'}]
    export default {
        name: "order",
        data() {
          return {
           data:{name:'',phone:'',info1:'',info2:'',info3:'',info4:'',info5:'',subjectList:[],subjectArray:[]}
          ,state:{name:'',username:'',password:'',verifyCode:''}
           ,subjectOptions : ["物理","化学","生物","技术","历史","地理","思想政治"]
            ,sex:'',
              type:'',
              sexVisible:false,
              gradeVisible:false,
              typeVisible:false,
              addSetList: [{
                 flex: 1,
                 values: sexList,
                 textAlign: 'center'
             }],
              addGradeList:[{
                flex: 1,
                values: ['高一', '高二', '高三'],
                textAlign: 'center'
             }],
             addTypeList: [{
                 flex: 1,
                 values: expertTypeList,
                 textAlign: 'center'
             }],
        }
       
      },
      methods:{
        submit:function(){
          let vm = this;
          this.data.subjects = this.data.subjectArray.join(",");
          vm.$http.post("/auth/saveOrder",vm.data).then(resp=>{
            if(resp.code == 0){
              Toast("预约成功!");
              vm.$router.push({path:"/UserCenter"});
            }
          })
        },
        showAddSex(){
        this.sexVisible = true;
       },
       showAddGrade(){
        this.gradeVisible = true;
       },
       showAddType(){
        this.typeVisible = true;
       },
       onSexChange(picker, values) {
       this.data.sex = this.$refs.pickerSex.getValues()[0].value
       this.sex = this.$refs.pickerSex.getValues()[0].label
       this.sexVisible = false
    },
     onGradeChange(){
        this.data.grade = this.$refs.pickerGrade.getValues()[0]
       this.gradeVisible = false
     },
     onTypeChange(picker, values) {
       this.data.expertType = this.$refs.pickerType.getValues()[0].value
       this.type = this.$refs.pickerType.getValues()[0].label
       this.typeVisible = false
    },
    oncancel(){ 
              this.sexVisible=false
              this.gradeVisible=false
              this.typeVisible=false
    },
      },
       created(){
          let vm = this;
          vm.$http.get("/auth/getOrder").then(resp=>{
            if(resp.code == 0 && resp.data){
              Object.assign(vm.data,resp.data);
            }
          })
       },
    }
</script>

<style scoped>
   .borderTop{
     border-top: 1px solid #F7F7F7;
   }
   .cancel{
      float: left;
      line-height: 40px;
      padding: 0 12px;
       font-size: 18px;
   }
   .sure{
     float: right;
     color: #007AFF;
     line-height: 40px;
      padding: 0 12px;
      font-size: 18px;
   }
</style>
